<template>
    <view class="service-page">
        <!-- 顶部导航栏 -->
        <NavBar :title="title" :isShowIcon="true" />
        <scroll-view scroll-y="true" class="scroll-Y page-content">
            <!-- 跑动次数卡片 -->
            <view v-if="showStats" class="top-stats">
                <view class="stat-item" v-for="(stat, index) in stats" :key="index">
                    <view class="stat-content">
                        <view class="stat-title">{{ stat.title }}</view>
                        <view class="stat-value">{{ stat.value }}</view>
                        <view class="stat-desc">{{ stat.previously }}</view>
                        <view class="stat-after">{{ stat.after }}</view>
                    </view>
                </view>
            </view>

            <!-- 服务信息卡片 -->
            <view class="section-card" v-for="(section, index) in sections" :key="index">
                <view class="section-header" :class="section.type">
                    <view class="section-icon-wrapper">
                        <image :src="section.icon" class="section-icon" />
                    </view>
                    <text class="section-title">{{ section.title }}</text>
                </view>
                <view class="section-content">
                    <!-- 信息行 -->
                    <template v-if="section.type === 'info'">
                        <view class="info-content">
                            <view class="info-row" v-for="(row, rowIndex) in section.content" :key="rowIndex">
                                <text class="label">{{ row.label }}</text>
                                <text class="value">{{ row.value }}</text>
                            </view>
                        </view>
                    </template>

                    <!-- 材料表格 -->
                    <template v-else-if="section.type === 'material'">
                        <view v-for="(table, tableIdx) in section.tableFormList" :key="tableIdx">
                            <view class="material-title">{{ table.tableTitle }}</view>
                            <view class="material-table">
                                <view class="material-row" v-for="(row, rowIndex) in table.tableData" :key="rowIndex">
                                    <text class="label">{{ row.label }}</text>
                                    <text
                                        class="value"
                                        :class="{ link: row.link }"
                                        @click="row.link && typeof row.value === 'function' && row.value()"
                                    >
                                        <template v-if="row.link && typeof row.value === 'function'"
                                            >【点击查看示例】</template
                                        >
                                        <template v-else>{{ row.value }}</template>
                                    </text>
                                </view>
                            </view>
                        </view>
                    </template>

                    <!-- 普通文本 -->
                    <template v-else-if="section.type === 'list'">
                        <view class="list-content">
                            <view class="list-item" v-for="(item, idx) in section.content" :key="idx">{{ item }}</view>
                        </view>
                    </template>

                    <template v-else>
                        <view class="text-content">{{ section.content }}</view>
                    </template>
                </view>
            </view>
        </scroll-view>
        <!-- 添加底部插槽 -->
        <slot name="bottom"></slot>
    </view>
</template>

<script>
export default {
    name: 'ServicePage',
    props: {
        // 页面标题
        title: {
            type: String,
            default: '服务页面'
        },
        // 是否显示统计卡片
        showStats: {
            type: Boolean,
            default: true
        },
        // 统计数据
        stats: {
            type: Array,
            default: () => [
                {
                    title: '跑动次数减少',
                    value: '100%',
                    after: '之后：4天',
                    previously: '之前：20天'
                },
                {
                    title: '递交材料减少',
                    value: '100%',
                    after: '之后：4份',
                    previously: '之前：20份'
                },
                {
                    title: '办理时间减少',
                    value: '100%',
                    after: '之后：4天',
                    previously: '之前：20天'
                }
            ]
        },
        // 服务信息部分
        sections: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        handleClick() {
            uni.navigateTo({
                url: `/pages/fromTable/disabled/index`
            });
        }
    }
};
</script>

<style scoped>
.service-page {
    background: #f5f5f5;
    min-height: 100vh;
    padding-top: 176rpx;
}

/* 跑动次数卡片 */
.top-stats {
    display: flex;
}

.stat-item {
    flex: 1;
    background: #2c5e9f;
    padding: 24rpx 20rpx;
    text-align: center;
}

.stat-content {
    position: relative;
    z-index: 1;
}

.stat-title {
    font-size: 30rpx;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 12rpx;
    font-weight: 500;
}

.stat-value {
    font-size: 42rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 12rpx;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
    text-align: left;
    padding: 0 10px;
}

.stat-desc {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.4;
    font-weight: 400;
    font-family: PingFang SC, PingFang SC;
    text-align: left;
    padding: 0 10px;
}
.stat-after {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.4;
    font-weight: 400;
    font-family: PingFang SC, PingFang SC;
    text-align: left;
    padding: 0 10px;
    text-decoration-line: line-through;
}

/* 卡片样式 */
.section-card {
    background: #ffffff;
    margin: 24rpx;
    border-radius: 12rpx;
    padding: 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.section-header {
    display: flex;
    align-items: center;
    padding: 24rpx;
}
.info-content {
    padding: 24rpx;
    background: #f1f8ff;
}

.section-icon-wrapper {
    width: 40rpx;
    height: 40rpx;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16rpx;
    background: #1e3a8a;
}

.section-icon {
    width: 24rpx;
    height: 24rpx;
    filter: brightness(0) invert(1);
}

.section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #2c5e9f;
    line-height: 20px;
}

/* 信息行样式 */
.info-row {
    display: flex;
    margin-bottom: 16rpx;
    line-height: 1.6;
}

.info-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.info-row .label {
    width: 180rpx;
    font-size: 30rpx;
    color: rgba(0, 0, 0, 0.4);
    font-weight: 600;
}

.info-row .value {
    font-size: 30rpx;
    color: rgba(0, 0, 0, 0.8);
    flex: 1;
    line-height: 20px;
}

/* 列表内容样式（事项联办） */
.list-content {
    margin: 0 24rpx 24rpx;
    padding: 20rpx;
    background: #f1f8ff;
    border: 1rpx solid #e5e7eb;
    border-radius: 12rpx;
}

.list-item {
    font-size: 30rpx;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

/* 文本内容样式 */
.text-content {
    font-size: 28rpx;
    color: #6b7280;
    line-height: 1.6;
    padding: 24rpx;
    background: #f1f8ff;
}

/* 材料表格样式 */
.material-table {
    border: 1rpx solid #e5e7eb;
    border-radius: 8rpx;
    overflow: hidden;
    background: #ffffff;
}

.material-title {
    padding: 20rpx;
    font-size: 30rpx;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8);
    line-height: 20px;
    display: flex;
}
.material-title::before {
    content: '•';
    color: #165dff;
    font-size: 1.5rem;
    margin-right: 20rpx;
}

.material-row {
    display: flex;
    border-bottom: 1rpx solid #e5e7eb;
}

.material-row:last-child {
    border-bottom: none;
}

.material-row .label {
    flex: 1;
    padding: 16rpx 12rpx;
    font-size: 26rpx;
    color: #374151;
    background: #f1f8ff;
    border-right: 1rpx solid #e5e7eb;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.material-row .value {
    flex: 1;
    padding: 16rpx 12rpx;
    font-size: 26rpx;
    color: #6b7280;
    display: flex;
    align-items: center;
    line-height: 1.4;
}
.material-row .value.link {
    color: #1e3a8a;
    text-decoration: underline;
    font-weight: 500;
}

/* 特殊标题样式 */
.section-header.time .section-icon-wrapper {
    background: #dc2626;
}

.section-header.location .section-icon-wrapper {
    background: #059669;
}

.section-header.accept .section-icon-wrapper {
    background: #7c3aed;
}

.section-header.material .section-icon-wrapper {
    background: #ea580c;
}
</style>
